/**
 * Created by lucas on 2017/3/19.
 */
"use strict";
import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import Logo from './components/Logo';
import Button from './components/Button';
import Suggest from './components/Suggest';
import Rating from './components/Rating';
import FromInput from './components/FormInput';
import Form from './components/Form';
import Actions from './components/Actions';
import Dialog from './components/Dialog';

ReactDOM.render(
    <div style={{padding: '20px'}}>
        <h1>Component discover</h1>

        <h2>Logo</h2>
        <div style={ {display: 'inline-block', background: 'purple'}}>
            <Logo />
        </div>

        <h2> Buttons </h2>
        <div>
            Button with onClick: <Button onClick={() => alert('click')}>Click me!</Button>
        </div>
        <div>
            A link: <Button href='http://lucaslz.com'>Follow me</Button>
        </div>
        <div>
            Custom class name: <Button className='custom'>I do nothing.</Button>
        </div>

        <h2>Suggest</h2>
        <div>
            <Suggest options={['eenie', 'meenie', 'miney', 'mo']} />
        </div>

        <h2>Rating</h2>
        <div>
            No initial value: <Rating/>
        </div>
        <div>
            Initial value 4: <Rating defaultValue={4}/>
        </div>
        <div>
            This one goes to 11: <Rating max={11}/>
        </div>
        <div>
            Read-only: <Rating readonly={true} defaultValue={3}/>
        </div>

        <h2>
            Form Inputs
        </h2>
        <table>
            <tbody>
                <tr>
                    <td>Vanilla input</td>
                    <td><FromInput/></td>
                </tr>
                <tr>
                    <td>Prefilled</td>
                    <td><FromInput defaultValue="it's like a default."/></td>
                </tr>
                <tr>
                    <td>Year</td>
                    <td><FromInput type="year"/></td>
                </tr>
                <tr>
                    <td>Rating</td>
                    <td><FromInput type="rating" defaultValue={4}/></td>
                </tr>
                <tr>
                    <td>Suggest</td>
                    <td><FromInput type="suggest" options={['red', 'green', 'blue']} defaultValue='green'/></td>
                </tr>
                <tr>
                    <td>Vanilla textarea</td>
                    <td><FromInput type="text" /></td>
                </tr>
            </tbody>
        </table>

        <h2>Form</h2>

        <Form
            fields={[
                {label:'Rating', type: 'rating', id: 'rateme'},
                {label:'Greetings', type: 'input', id: 'freetext'}
            ]}
            initialData={{rateme: 4, freetext: 'hello'}}
        />

        <h2>Form readonly</h2>

        <Form
            fields={[
                {label:'Rating', type: 'rating', id: 'rateme'},
                {label:'Greetings', type: 'input', id: 'freetext'}
            ]}
            initialData={{rateme: 4, freetext: 'hello'}}
            readonly={true}
        />

        <h2>Actions</h2>
        <div>
            <Actions onAction={type => alert(type)}></Actions>
        </div>

        <h2>Dialog</h2>
        <Dialog
            header="Out-of-the-box-example"
            onAction={type => alert(type)}
        >
            Hello, dialog!
        </Dialog>

        <Dialog
            header="No cancel, custom button"
            hasCancel={false}
            confirmLabel="whatever"
            onAction={type => alert(type)}
        >
            Anything goes here, see:
            <Button>A button</Button>
        </Dialog>
    </div>,
    document.getElementById('pad')
);